<template>
  <div class="widget-button-option">
    <el-form label-width="90px" size="mini">
      <el-form-item label="颜色">
        <el-color-picker v-model="attribute.color" show-alpha/>
      </el-form-item>
      <el-form-item label="文字大小">
        <el-input-number v-model="attribute.fontSize" style="width: 100%"/>
      </el-form-item>
      <el-form-item label="背景色">
        <tm-color-range v-model="attribute.bgColor" />
      </el-form-item>
      <el-form-item label="边框类型">
        <tm-select v-model="attribute.borderType" :data="borderTypeList"/>
      </el-form-item>
      <el-form-item label="边框宽度">
        <el-input-number v-model="attribute.borderWidth" :min="0"/>
      </el-form-item>
      <el-form-item label="边框颜色">
        <el-color-picker v-model="attribute.borderColor" />
      </el-form-item>
      <el-form-item label="圆角">
        <el-input-number v-model="attribute.radius" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import tmColorRange from '@/package/components/tm-color-range'
import tmSelect from '@/package/components/tm-select'

export default {
  name: 'widget-button-option',
  cnName: '按钮配置',
  components: {
    tmColorRange,
    tmSelect
  },
  props: {
    attribute: Object
  },
  data() {
    return {
      borderTypeList: [
        {label: 'solid', value: 'solid'},
        {label: 'dotted', value: 'dotted'},
        {label: 'dashed', value: 'dashed'}
      ]
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.widget-button-option {
}
</style>
